<template>
  <div class="w-full h-full min-h-[520px] bg-[#2D3A4B]">
    <el-row class="h-[500px]" justify="center" align="middle">
      <el-col :xs="20" :sm="15" :md="10" :lg="7">
        <h1 class="text-white font-bold text-2xl mb-5" align="center">蓝云后台管理系统</h1>
        <el-form ref="loginForm" :model="loginFormData" :rules="loginFormRule">
          <el-form-item prop="username">
            <el-input v-model="loginFormData.username" placeholder="用户名" autofocus />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginFormData.password"
              type="password"
              placeholder="密码"
              prop="password"
              show-password
            />
          </el-form-item>
          <el-form-item>
            <el-button class="w-full" type="primary" @click="d_handleLogo(loginForm)">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script name="Login" lang="ts" setup>
import { debounce } from 'lodash';
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { type FormInstance, type FormRules } from 'element-plus';

const router = useRouter();

const loginForm = ref<FormInstance>();

const loginFormData = reactive({
  username: '',
  password: ''
});

const loginFormRule = reactive<FormRules>({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
});

// 处理登录
const handleLogin = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      router.replace('/home');
    }
  });
};
const d_handleLogo = debounce(handleLogin, 1000, { leading: true, trailing: false });
</script>
